<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>2.组件的嵌套</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
			App组件的使用
				总结：
					1.一般工程化开发中，都会用到一个App组件包裹所有的组件
					2.全局注册组件：Vue.component('组件名',组件)
		-->
		<!-- 准备好一个容器-->
		<div id="demo"></div>
	</body>

	<script type="text/javascript">
		//阻止 vue 在启动时生成生产提示。
		Vue.config.productionTip = false

		//创建Hello组件
		const Hello = Vue.extend({
			template:`<h2>Hello</h2>`
		})

		//全局注册，好处：注册一次，所有组件的结构中可以直接写其标签
		//原则：只有那些很多人都要用的组件，我们才全局注册
		Vue.component('Hello',Hello)

		//创建School组件
		const School = Vue.extend({
			// components:{Hello}, //局部注册
			template:`
				<div>
					<Hello></Hello>
					<h2>学校名称：{{sname}}</h2>	
					<h2>学校地址：{{address}}</h2>	
					<button @click="sname+'~'">改学校名</button>
					<button @click="welcome">欢迎你</button>
				</div>
			`,
			data(){
				return {
					sname:'尚硅谷',
					address:'宏福科技园'
				}
			},
			methods:{
				welcome(){
					alert(`${this.sname}欢迎你！`)
				}
			}
		})
		
		//创建Person组件
		const Person = Vue.extend({
			// components:{Hello},//局部注册
			template:`
				<div>
					<Hello></Hello>
					<h2>人名：{{pname}}</h2>	
					<h2>年龄：{{age}}</h2>	
					<button @click="age++">年龄+1</button>
					<button @click="speak">说话</button>
				</div>
			`,
			data(){
				return {
					pname:'王五',
					age:18
				}
			},
			methods:{
				speak(){
					alert('十一放假，必须得嗨起来！！')
				}
			}
		})
		
		//所有组件的外壳组件（弟弟中的leader）
		const App = Vue.extend({
			components:{School,Person},
			template:`
				<div>
					<School></School>
					<hr>
					<Person></Person>
				</div>
			`,
		})

		new Vue({
			el:'#demo',
			components:{App},
			template:`<App></App>`
		})
	</script>
</html>